<template>
  <div>
    <t-card class="list-card-container">
      <div class="table-container">
        <div
          slot="body"
          style="width: 100%;display: flex;height: 88vh;flex-direction: row;justify-content: space-between;"
        >
          <div style="width: 20%;height: 100%;display: flex;flex-direction: column;justify-content: flex-start;">
            <div>
              示例上传按钮：
            </div>
            <file-upload
              v-model="imgUrl2"
              upload-type="minio"
              :limit="1"
              :is-picture-card="false"
              :is-show-tip="false"
              biz-path="portal/oo-csc-upp-system-atom"
            />
          </div>

          <div style="width: 80%;height: 80vh;overflow: auto;background-color: #fff;">
            <vue-markdown
              :source="mdContent"
              class="newConcentLeft my-markdown"
            ></vue-markdown>
          </div>
        </div>
      </div>
    </t-card>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import FileUpload from "@/components/mainEntrance/FileUpload/index.vue";
import VueMarkdown from 'vue-markdown';
import { MarkdownPro, MarkdownPreview } from 'vue-meditor'
import hljs from 'highlight.js'
import uploadMD from '../../../../../public/markdown/uploadfunction.md?raw';//使用?raw将引入文件变成字符串
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/components/prism-clike.min.js';
import 'prismjs/components/prism-javascript.min.js';

export default Vue.extend({
  name: "ListBase",
  components: {
    FileUpload,
    VueMarkdown,
    MarkdownPro,
    MarkdownPreview
  },
  filters: {
  },
  data() {
    return {
      mdContent: uploadMD,
      showUploadModal: false,//文件上传弹窗
      imgUrl1: "", // 引入图片方法一
      imgUrl2: undefined, // 引入文件方法二
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
        beginTime: undefined,
        endTime: undefined
      },// 导出参数
    };
  },
  computed: {
  },
  created() {
    Prism.highlightAll();
  },
  mounted() {
    Prism.highlightAll();
  },
  methods: {
    // 文件上传关闭
    funUploadClose() {
      this.imgUrl2 = undefined;
      this.showUploadModal = false;
    },
    // 文件上传确认
    funUploadConfirm() {
      this.$message.success("文件上传成功");
      this.imgUrl2 = undefined;
      this.showUploadModal = false;
    },
  }
});
</script>
<style>
.t-table--column-fixed .t-table__cell--fixed-right {
  z-index: 999;
  background-color: #fff;
}
</style>

<style lang="less" scoped>
@import "@/style/variables";

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 0 0 6px;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}

.t-button + .t-button {
  margin-left: @spacer;
}

.newConcentLeft {
  margin: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #19181a;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  white-space: pre-wrap;
  word-wrap: break-word;

  img {
    width: 100%;
  }

  > table {
    width: 100%;
  }

  > pre {
    white-space: normal;
  }
}
</style>
